{% extends 'plugins/plugin_base.html' %}{% load static i18n %}
{% block extrajs %}
{{ block.super }}
<script type="text/javascript" src="{% static "js/jquery-1.11.1.min.js" %}"></script>
<link rel="stylesheet" media="all" type="text/css" href="% static "jquery-autosuggest/css/autoSuggest.css" %}">
<style type="text/css">
/* for autocomplete */
.vTextField {
    width: 20em;
}

ul.vTextField {
    padding-bottom:0;
}

ul.as-list {
    margin: 0 0 0 0.5em !important;
    border: solid 1px #ddd !important;
}

#id_tags__tagautosuggest {
    height: 16px !important;
    margin-top: 1em;
}

</style>
<script type="text/javascript">
    // Puts the included jQuery into our own namespace
    var django = {
        "jQuery": jQuery.noConflict(true)
    };
</script>
<script src="{% static "jquery-autosuggest/js/jquery.autoSuggest.minified.js" %}" type="text/javascript"></script>
{% endblock %}
{% block content %}
    <h2>{{ form_title }} {{ plugin }}</h2>
    <div class="alert alert-info">
        <p class="required"><label style="display:inline"></label> {% trans "required field." %}</p>
    </div>
    {% if form.errors %}
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>{% trans "The form contains errors and cannot be submitted, please check the fields highlighted in red." %}</p>
    </div>
    {% endif %}
    {% if form.non_field_errors %}
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {% for error in form.non_field_errors %}
            <p>{{ error }}</p>
        {% endfor %}
    </div>
    {% endif %}
   <form action="" method="post" class="horizontal" enctype="multipart/form-data">{% csrf_token %}
        {% include "plugins/form_snippet.html" %}
        <div class="form-actions">
            <button class="btn btn-primary" type="submit">{% trans "Save" %}</button>
        </div>
    </form>
    <script type="text/javascript">
    (function ($) {
                var tags_as_string;
                $(document).ready(function (){
                    tags_as_string = $('#id_tags').val();
                    $('#id_tags').hide();
                    $('#id_tags').before('<input type="text" id="id_tags__tagautosuggest" value="" name="tags" autocomplete="off" class="as-input vTextField"><br />');
                    $("#id_tags__tagautosuggest").val(tags_as_string);
                    $("#id_tags__tagautosuggest").autoSuggest("/taggit_autosuggest/list/", {
                        asHtmlID: "id_tags__tagautosuggest",
                        startText: "Enter Tag Here",
                        emptyText: "Not found (press TAB to add)",
                        limitText: "No More Selections Are Allowed",
                        preFill: tags_as_string,
                        queryParam: 'q',
                        retrieveLimit: 100,
                        minChars: 1,
                        neverSubmit: true
                    });

                    $('.as-selections').addClass('vTextField');
                    $('ul.as-selections li.as-original input').addClass('vTextField');

                    $('#id_tags').parents().find('form').submit(function (){
                        tags_as_string = $("#as-values-id_tags__tagautosuggest").val();
                        $("#id_tags__tagautosuggest").remove();
                        $("#id_tags").val(tags_as_string);
                    });
                });
            })(django.jQuery);
        </script>

{% endblock %}
